import React from "react";
const Header = function(props){
  return (<>
  <div>
    {/* 组件使用的时候内部的组件用传递到 props.children 中
      可以在这里直接做渲染
    */}
    {props.children}
  </div>
  </>)
}

class Content extends React.Component {
  render(){
    return (<>
      <div>
        {/* 传递多个子组件的时候，children 会是一个数组，可以指明将数组中的哪一个显示在指定区域，顺序很关键 */}
         {this.props.children[0]} ---  学习 React 实际上是在学习 JavaScript   ---{this.props.children[1]}

        <br />

      {/* 可以通过 id 属性进行判断当前属性的值是什么，然后来决定将该元素显示在你哪里 */}
        {this.props.children[0].props.id === 'left' ? this.props.children[0] : null} ---  学习 React 实际上是在学习 JavaScript   ---{this.props.children[1]}

      </div>
    </>)
  }
}

function Footer(props){

  return (<>
    <div>
      {/* 将插槽中的标签通过属性的方式传递到子组件，然后子组件直接在指定区域做渲染即可 */}
      {props.left} -- 页脚 -- {props.r}
    </div>
  </>)
}

export default class App extends React.Component {
  render(){
    return (<>
      <div>
        <Header>
          <span>我</span>
          <span>爱</span>
          <p>北京天安门</p>
        </Header>
        <Content>
          <span id="left">左边</span>
          <span id="right">右边</span>
        </Content>
        <Footer left={<span>放左边</span>} r={<span>放右边</span>} />
      </div>
    </>)
  }
}

